<template>
  <div class="headlines">
    <div style="background: white;padding: 5px;">
      <div class="options">
        <div style="padding: 5px">经营异常报告</div>
        <div>
          <el-input v-model="pevent" size="mini" style="width: 168px;margin-right: 5px;" />
          <el-button type="primary" size="mini" @click="headlines">搜索</el-button>
        </div>
      </div>
      <div>
        <jc-table
          ref="isTable"
          serial
          :table-data="tableData"
          :table-header="tableHeader"
          :table-height="tableHeight"
          @clickRow="headlineDetail"
        />
      </div>
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="headlines"
        />
      </div>
    </div>
    <div style="background: white;padding: 5px;margin-top: 10px;">
      <div class="options">
        <div style="padding: 5px">销售应收报表（单位：元）</div>
        <div>
          <el-input v-model="pevent" size="mini" style="width: 168px;margin-right: 5px;" />
          <el-button type="primary" size="mini" @click="headlines">搜索</el-button>
        </div>
      </div>
      <jc-table
        ref="isTable"
        serial
        :table-data="tableData1"
        :table-header="tableHeader1"
        :table-height="tableHeight"
      />
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total1"
          :page.sync="pageNum1"
          :limit.sync="pageSize1"
          @pagination="headlines"
        />
      </div>
    </div>
    <div class="revenue">
      <div class="revenue-main">
        <div class="revenue-main-lef">
          <span class="revenue-title">
            交期异常报表
            <el-button style="margin-left: 5px;" size="mini" @click="monthIncome">{{ $t('btn.reload') }}</el-button>
          </span>
          <jc-table
            ref="isTable"
            :table-data="tableData2"
            :table-header="tableHeader2"
            table-height="350px"
          />
          <div style="margin-top: 5px;">
            <jc-pagination
              :total="total2"
              :page.sync="pageNum2"
              :limit.sync="pageSize2"
              @pagination="monthIncome"
            />
          </div>
        </div>
        <div class="revenue-main-rig">
          <span class="revenue-title">
            成品库存待出报表
            <el-button style="margin-left: 5px;" size="mini" @click="yearIncome">{{ $t('btn.reload') }}</el-button>
          </span>
          <jc-table
            ref="isTable"
            :table-data="tableData3"
            :table-header="tableHeader3"
            table-height="350px"
          />
          <div style="margin-top: 5px;">
            <jc-pagination
              :total="total3"
              :page.sync="pageNum3"
              :limit.sync="pageSize3"
              @pagination="yearIncome"
            />
          </div>
        </div>
      </div>
    </div>
    <div style="background: white;padding: 5px;margin-top: 10px;">
      <div class="options">
        <div style="padding: 5px">销售利润报表</div>
        <div>
          <el-input v-model="pevent" size="mini" style="width: 168px;margin-right: 5px;" />
          <el-button type="primary" size="mini" @click="headlines">搜索</el-button>
        </div>
      </div>
      <jc-table
        ref="isTable"
        serial
        :table-data="tableData4"
        :table-header="tableHeader4"
        :table-height="tableHeight"
      />
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total4"
          :page.sync="pageNum4"
          :limit.sync="pageSize4"
          @pagination="headlines"
        />
      </div>
    </div>
    <!--  客户下单 销售业绩 产品销售排行  -->
    <list-data />
  </div>
</template>

<script>
import listData from '@/views/homePageNew/salesCenter/component/listData'
export default {
  name: 'ManageHome',
  components: {
    listData
  },
  data: () => ({
    total: 0,
    pageNum: 1,
    pageSize: 20,
    ftype: 2052,
    tableHeight: '350px',
    headlinesData: {},
    value: '',
    value1: '',
    input: '',
    tableData: [],
    tableHeader: [
      { label: '异常日期', prop: 'a', width: '100px' },
      { label: '异常事项', prop: 'a' },
      { label: '异常部门', prop: 'a', width: '200px' },
      { label: '部门负责人', prop: 'a', width: '200px' },
      { label: '操作', type: 'btn', width: '200px' }
    ],
    total1: 0,
    pageNum1: 1,
    pageSize1: 20,
    tableData1: [],
    tableHeader1: [
      { label: '客户编码', prop: 'a' },
      { label: '客户名称', prop: 'a' },
      { label: '销售订单号', prop: 'a' },
      { label: '应收金额', prop: 'a' },
      { label: '发货时间', prop: 'a' },
      { label: '逾期天数', prop: 'a' },
      { label: '业务员', prop: 'a' },
      { label: '客户年销售金额', prop: 'a' },
      { label: '在制订单金额', prop: 'a' },
      { label: '客户合作年限', prop: 'a' }
    ],
    total2: 0,
    pageNum2: 1,
    pageSize2: 20,
    tableData2: [], // 交期异常报表
    tableHeader2: [
      { label: '客户编码', prop: 'a' },
      { label: '客户名称', prop: 'a' },
      { label: '销售订单号', prop: 'a' },
      { label: '下单时间', prop: 'a' },
      { label: '客户交期', prop: 'a' },
      { label: '逾期天数', prop: 'a' }
    ],
    total3: 0,
    pageNum3: 1,
    pageSize3: 20,
    tableData3: [], // 成品库存待出报表
    tableHeader3: [
      { label: '销售订单号', prop: 'a' },
      { label: '客户名称', prop: 'a' },
      { label: '订单数量', prop: 'a' },
      { label: this.$t('market.rukufqty'), prop: 'a' },
      { label: '客户交期', prop: 'a' },
      { label: '入库时间', prop: 'a' },
      { label: '库存天数', prop: 'a' },
      { label: '业务员', prop: 'a' }
    ],
    total4: 0,
    pageNum4: 1,
    pageSize4: 20,
    tableData4: [],
    tableHeader4: [
      { label: '客户编码', prop: 'a' },
      { label: '客户名称', prop: 'a' },
      { label: '销售订单号', prop: 'a' },
      { label: '下单时间', prop: 'a' },
      { label: '订单总金额', prop: 'a' },
      { label: '订单毛利', prop: 'a' },
      { label: '订单毛利率', prop: 'a' },
      { label: '全年订单金额', prop: 'a' },
      { label: '全年毛利润金额', prop: 'a' },
      { label: '全年毛利率', prop: 'a' },
      { label: '客户排名', prop: 'a' },
      { label: '业务员', prop: 'a' }
    ]
  }),
  created() {
    this.$refs.isTable.reload()
    this.headlines() // 头条列表
    /* this.yearIncome() // 本年月度
    this.monthIncome() // 年度净资产
    this.yearAssets() // 资产负债表 */
  },
  methods: {
    // 头条列表
    headlines() {
      this.tableData = [{ a: 'a' }]
      this.tableData1 = [{ a: 'a' }]
      this.tableData2 = [{ a: 'a' }]
      this.tableData3 = [{ a: 'a' }]
      this.tableData4 = [{ a: 'a' }]
      // const DATA = {
      //   pageSize: this.pageSize,
      //   pageNum: this.pageNum,
      //   serch: this.pevent
      // }
      // queryheadlinesList(DATA).then(res => {
      //   if (res.code === 0) {
      //     this.tableData = res.data.array
      //     this.total = res.data.total
      //   }
      // })
    },
    // 交期异常报表
    monthIncome() {
      const year = this.years || new Date().getFullYear()
      this.selYear = year
      // queryReportForms({ year }).then(res => {
      //   if (res.code === 0) {
      //     this.tableData2 = res.data
      //   } else {
      //     this.$confirm(res.message, '提示', {
      //       confirmButtonText: '确定',
      //       type: 'warning'
      //     })
      //   }
      // })
    },
    // 成品库存待出报表
    yearIncome() {
      // queryReportFormsYear({}).then(res => {
      //   if (res.code === 0) {
      //     this.tableData3 = res.data.data
      //     this.headList = Object.values(res.data.year).map(res => {
      //       return res + '年'
      //     })
      //     this.headList.push('合计')
      //     this.headList.unshift('年度净资产')
      //     this.tableHeader3.map((res, inde) => {
      //       this.headList.forEach((item, index) => {
      //         if (inde === index) {
      //           res.label = item
      //         }
      //       })
      //     })
      //     this.$refs.column.queryContrast()
      //   } else {
      //     this.$confirm(res.message, '提示', {
      //       confirmButtonText: '确定',
      //       type: 'warning'
      //     })
      //   }
      // })
    },
    // 资产负债表
    yearAssets() {
      // queryYearAssets({}).then(res => {
      //   if (res.code === 0) {
      //     this.assetsDa = res.data
      //   } else {
      //     this.$confirm(res.message, '提示', {
      //       confirmButtonText: '确定',
      //       type: 'warning'
      //     })
      //   }
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination-container {
  padding: 0 !important;
}
.headlines {
  margin-bottom: 10px;
}
.options {
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
.shijian {
  max-height: 35px;
  &::v-deep p {
    margin: 0;
    padding: 0;
  }
  &::v-deep img {
    max-width: 50px;
    max-height: 30px;
  }
}
.revenue {
  padding: 0 5px 15px;
  margin-top: 10px;
  display: flex;
  background-color: white;
  flex-direction: column;
  &-title {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    position: relative;
    .btnTig {
      position: absolute;
      right: 0;
    }
  }
  &-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-flow: nowrap;
    .revenue-main-lef {
      width: 49.8%;
    }
    .revenue-main-rig {
      width: 49.8%;
      .column {
        width: 100%;
        height: 200px;
      }
    }
    .expenditure {
      display: grid;
      grid-template-columns: repeat(2, 70%, 30%);
    }
  }
}
.headetail {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    padding: 5px 0;
    span:nth-child(1) {
      font-size: 16px;
      font-weight: 600;
      margin-right: 10px;
    }
    h2 {
      text-align: center;
      margin: 0 0 10px;
      padding: 0;
    }
  }
}
</style>
